<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作品展示</title>
    <link href="${server}/css/bootstrap.css" rel="stylesheet">
    <link href="${server}/css/main.css" rel="stylesheet"/>
    <link href="${server}/css/worksShow.css" rel="stylesheet">
</head>
<body>
<#include "nav.ftl">
<div class="work_content clear">
    <div class="work_top">
        <ul>
            <li class="divider"></li>
            <li class="class-department-parent">
                <a class="work_list" id="work_department" href="#">部门分类&nbsp;<span class="caret"></span></a>
                <ul class="class-department">
                    <li><a href="${server}/worksShow/1">全部</a></li>
                    <li><a href="${server}/worksShow/1?DEPARTMENT=动漫部">动漫部</a></li>
                    <li><a href="${server}/worksShow/1?DEPARTMENT=技术部">技术部</a></li>
                    <li><a href="${server}/worksShow/1?DEPARTMENT=网络部">网络部</a></li>
                    <li><a href="${server}/worksShow/1?DEPARTMENT=行政部">行政部</a></li>
                    <li><a href="${server}/worksShow/1?DEPARTMENT=项目部">项目部</a></li>
                </ul>
            </li>
            <li class="divider"></li>
            <li class="class-other-parent">
                <a class="work_list" id="work_new" href="#">最新上传&nbsp;<span class="caret"></span></a>
                <ul class="class-other">
                    <li><a href="${server}/worksShow/1?ORDERBY=overNumber">人气最多</a></li>
                    <li><a href="${server}/worksShow/1?ORDERBY=commentNumber">评论最多</a></li>
                    <li><a href="${server}/worksShow/1?ORDERBY=recommendNumber">推荐最多</a></li>
                    <li><a href="${server}/worksShow/1?ORDERBY=collectionNumber">收藏最多</a></li>
                </ul>
            </li>
            <li class="divider"></li>
            <li class="class-year-parent">
                <a class="work_list" id="work_year" href="#">年份&nbsp;<span class="caret"></span></a>
                <ul class="class-year">
                    <li><a href="${server}/worksShow/1?YEAR=2017">2017</a></li>
                    <li><a href="${server}/worksShow/1?YEAR=2016">2016</a></li>
                </ul>
            </li>
            <li class="divider"></li>
        </ul>
        <div class="input-group pull-right">
            <input type="text" class="form-control" id="search" placeholder="搜搜作品">
            <div id="search-btn" class="input-group-addon">
                <span class="glyphicon glyphicon-search"></span>
            </div>
        </div>

    </div>


    <div class="work">
        <div class="work_document">共有${page.sumPage}件作品</div>

    <#list listWorks as work>
        <a class="col-sm-10 col-md-2 thumbnail" href="${server}/worksInfo/${work.wid}">
            <img src="${work.workImg}">
            <div class="caption">
                <h5>${work.name}</h5>
                <small>作品类别：${work.classes}</small>
                <br/>
                <small>作者名：${work.author.username}</small>
                <br/>
                <small>发布时间：${work.ago}</small>
                <br/>
                <small>${work.overNumber}浏览/${work.commentNumber}评论/${work.collectionNumber}收藏</small>
            </div>
        </a>
    </#list>

    </div>
    <nav class="page">
        <ul class="pagination">
        <#if (page.curPage - 3 > 0)>
            <li>
                <a href="1" aria-label="Previous">
                    <span aria-hidden="true">1&laquo;</span>
                </a>
            </li>
        </#if>
        <#if page.sumPage <= 5 >
            <#list 1..page.sumPage as index>
                <#if index == page.curPage>
                    <li class="active"><a href="#">${page.curPage}</a></li>
                <#else>
                    <li><a href="${index}">${index}</a></li>
                </#if>
            </#list>
        <#elseif (page.curPage - 3  >= 0)>
            <li class="active"><a href="#">${page.curPage}</a></li>
            <li><a href="${page.curPage-1}">${page.curPage-1}</a></li>
            <li><a href="${page.curPage-2}">${page.curPage-2}</a></li>
        </#if>

        <#if page.curPage + 2 < page.sumPage>
            <li>
                <a href="${page.sumPage}" aria-label="Next">
                    <span aria-hidden="true">${page.sumPage}&raquo;</span>
                </a>
            </li>
        </#if>

        </ul>
        <div class="page_go">
            <span>跳转到</span>
            <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-addon">GO</div>
            </div>
        </div>
    </nav>
    <hr/>
    <div class="work_bottom">
        <div class="work_guess">
            <h5 class="work_document">您也许会对以下作品感兴趣</h5><h6><a href="#">换一换</a></h6>
        </div>
        <hr/>
    <#list interestWorks as work>
        <a class="col-sm-10 col-md-2 thumbnail" href="${server}/worksInfo/${work.wid}">
            <img src="${work.workImg}">
            <div class="caption">
                <h5>${work.name}</h5>
                <small>作品类别：${work.classes}</small>
                <br/>
                <small>作者名：${work.author.username}</small>
                <br/>
                <small>发布时间：${work.ago}</small>
                <br/>
                <small>${work.overNumber}浏览/${work.commentNumber}评论/${work.collectionNumber}收藏</small>
            </div>
        </a>
    </#list>
    </div>
</div>

<div id="footer_bg">
    <div class="footer clear">
        <div class="f1">联系我们</div>
        <div class="f2">
            <ul>
                <li>微信公众号：abc912342642</li>
                <li>新浪微博：郑州轻院计算机学院创业中心</li>
                <li>Email:zzuli_cyzx@163.com</li>
                <li>地址：计算机楼108</li>
            </ul>
        </div>
        <div class="f3">
            <img src="${server}/img/About/weixin.jpg" alt="weixin"/>
            <p>创业中心微信</p>
        </div>
        <div><img src="${server}/img/About/weibo.jpg" alt="weibo"/>
            <p>创业中心微信</p></div>
    </div>
</div>
</body>
<script src="${server}/js/jquery.min.js"></script>
<script src="${server}/js/bootstrap.min.js"></script>
<script src="${server}/js/main.js"></script>
<script src="${server}/js/worksShow.js"></script>
<script>
    $('#search-btn').click(function () {
        window.location.href = "${server}/worksShow/1?KEY=" + $('#search').val();
    })
</script>
</html>